<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef" class="flex items-center">
				<el-form-item prop="fileNameCh" label="资源名称">
					<el-input placeholder="请输入资源名称查询" clearable style="max-width: 180px" v-model="state.queryForm.fileNameCh" />
				</el-form-item>
				<el-form-item prop="label" label="标签">
					<el-input placeholder="请输入标签内容查询" clearable style="max-width: 180px" v-model="state.queryForm.label" />
				</el-form-item>
				<el-form-item prop="dataSourceType" label="类型">
					<el-select v-model="state.queryForm.dataSourceType" placeholder="请选择类型" clearable>
						<el-option v-for="item in dataSourceType" :key="item.value" :label="item.text" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item prop="dataType" label="格式">
					<el-select v-model="state.queryForm.dataType" placeholder="请选择格式" clearable>
						<el-option v-for="item in dataType" :key="item.value" :label="item.text" :value="item.value" />
					</el-select>
				</el-form-item>
			</el-form>
			<div class="flex justify-between">
				<el-form-item>
					<el-button icon="CirclePlus" type="primary" @click="fileAdd('add')"> 创建资源 </el-button>
					<!-- <el-button class="ml10" icon="tools" type="primary" @click="handleLightweight"> 模型轻量化 </el-button> -->
				</el-form-item>
				<el-form-item>
					<el-button @click="query" class="ml10" icon="search" type="primary"> 查询 </el-button>
					<el-button icon="Refresh" @click="resetQuery">重置</el-button>
				</el-form-item>
			</div>
			<el-table
				ref="tableRef"
				:data="state.dataList"
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
				row-key="path"
				style="width: 100%"
				@selection-change="handleSelectionChange"
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle?.headerCellStyle"
				@filter-change="filterChange"
			>
				<el-table-column prop="fileNameCh" label="资源名称" width="180" />
				<el-table-column prop="dataSourceType" label="类型" :filters="dataSourceType" column-key="dataSourceType" :filter-multiple="false">
					<template #default="scope">
						<el-tag class="h-8" size="large">{{ filterDataType(scope.row.dataSourceType, 'name', 'dataSourceType') }} </el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="dataType" label="格式" :filters="dataType" column-key="dataType" :filter-multiple="false">
					<template #default="scope">
						<el-tag class="h-8" size="large">{{ filterDataType(scope.row.dataType, 'name', 'dataType') }} </el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="label" label="标签" width="230">
					<template #default="scope">
						<div class="flex gap-2 items-center justify-center">
							<el-tag size="large" v-for="item in scope.row.labelList" :key="item">{{ item }}</el-tag>
							<el-icon class="ml-2 border cursor-pointer" @click="handAddTag(scope)"><Plus /></el-icon>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="sourceServiceUrl" label="源文件路径" />
				<el-table-column prop="fileRemarks" label="资源描述" />
				<el-table-column prop="uploadStatus" label="上传状态" column-key="uploadStatus" :filter-multiple="false">
					<template #default="scope">
						<el-tag :type="scope.row.uploadStatus == 1 ? 'success' : scope.row.uploadStatus == 3 ? 'danger' : 'warning'">{{
							scope.row.uploadStatus == 1 ? '上传成功' : scope.row.uploadStatus == 3 ? '上传失败' : '上传中'
						}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					prop="publishStatus"
					label="发布状态"
					:filters="[
						{ text: '已发布', value: 1 },
						{ text: '未发布', value: 0 },
					]"
					column-key="publishStatus"
					:filter-multiple="false"
				>
					<template #default="scope">
						<el-tag :color="scope.row.publishStatus == 1 ? '#DAF7C9' : '#E8EAF1'">{{ scope.row.publishStatus == 1 ? '已发布' : '未发布' }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="updateTime" label="更新时间" />
				<el-table-column prop="createTime" label="上传时间" />
				<el-table-column prop="date" label="操作">
					<template #default="scope">
						<el-button
							v-if="scope.row.dataSourceType == 1 && !scope.row.fileId"
							class="ml10 is-text"
							icon="top"
							type="primary"
							@click="fileAdd('release', scope.row)"
							:disabled="scope.row.publishStatus == 1"
						>
							发布
						</el-button>
						<el-button
							v-else
							class="ml10 is-text"
							icon="top"
							type="primary"
							@click="handleStatus(scope.row)"
							:disabled="scope.row.publishStatus == 1"
						>
							发布
						</el-button>
						<el-button class="ml10 is-text" icon="edit" type="primary" @click="fileAdd('edit', scope.row)" :disabled="scope.row.publishStatus == 1">
							编辑
						</el-button>
						<el-button class="ml10 is-text" icon="delete" type="primary" @click="handleDelete(scope.row)" :disabled="scope.row.publishStatus == 1">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"> </pagination>
		</div>
		<addFileDiaog ref="uploadFile" @refresh="getDataList" />
		<LigtDiaog ref="LigtPopup" @refresh="getDataList" />
		<filerLayerDiaog ref="layertPopup" @refresh="getDataList" />
		<addTag ref="addTagRef" @refresh="uplateTag" />
	</div>
</template>

<script lang="ts" name="fileManage" setup>
import { getFileList, delFileList, downFile, saveSubmit, updateDataLabel } from '/@/api/project/index';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
import addFileDiaog from './components/filemanage/addFileDiaog.vue';
import LigtDiaog from './components/filemanage/LigtDiaog.vue';
import filerLayerDiaog from './components/filemanage/filerLayerDiaog.vue';
import addTag from './components/addTag.vue';
import { getIdProject } from '/@/api/admin/role';
import { useUserInfo } from '/@/stores/userInfo';
import { useDict } from '/@/hooks/dict';
import Form from '../admin/client/form.vue';
import { active } from 'sortablejs';
// 引入组件
const { t } = useI18n();
// 定义变量内容
const tableRef = ref();
const ids = ref([]);
const queryRef = ref();
const uploadFile = ref('');
const LigtPopup = ref('');
const layertPopup = ref('');
const addTagRef = ref('');

const dataSourceType = ref<any[]>([
	{ text: '基础底图', value: '1' },
	{ text: '二维矢量', value: '2' },
	{ text: '三维模型', value: '3' },
]);

const dataType = ref<any[]>([
	{ text: 'Shapefile', value: '1' },
	{ text: 'Tif', value: '2' },
	{ text: '3Dtiles', value: '3' },
	{ text: 'PostGIS', value: '4' },
	{ text: 'Fbx/Glb', value: '5' },
	{ text: '瓦片地图', value: '6' },
	{ text: '地形', value: '7' },
	{ text: 'WMS服务', value: '8' },
]);

const fileIds = ref([]);
const state: BasicTableProps = reactive<BasicTableProps>({
	pageList: getFileList,
	isPage: true,
	props: {
		item: 'records',
		totalCount: 'total',
	},
	queryForm: {},
});
const { getDataList, tableStyle, currentChangeHandle, sizeChangeHandle } = useTable(state);
const options = ref([]);

// 搜索事件
const query = async () => {
	state.dataList = [];
	getDataList();
	if (uploadFile.value) {
		let res = await getFileList({ current: 1, size: 15 });
		// 根据fileUid修改上传状态
		for (let i = 0; i < res.data.records.length; i++) {
			if(res.data.records[i].fileUid){
				if (res.data.records[i].fileUid == uploadFile.value.uploadList[i].fileUid) {
				uploadFile.value.uploadList[i].type=res.data.records[i].uploadStatus == 1 ? '上传成功' : res.data.records[i].uploadStatus == 3 ? '上传失败' : '上传中'
			}
			}
			
		}
	}
};

//判断格式
const filterDataType = (type: string, key: any, name: any) => {
	if (name == 'dataType') {
		const formatName = dataType.value.find((item) => item.value == type);
		return formatName ? formatName.text : '';
	} else if (name == 'dataSourceType') {
		const typeName = dataSourceType.value.find((item) => item.value == type);
		return typeName ? typeName.text : '';
	}
};

//勾选多选框
const handleSelectionChange = (arr) => {
	ids.value = arr.map((item) => {
		return item.fileDataSourceId;
	});
	fileIds.value = arr;
};
// 清空搜索条件
const resetQuery = () => {
	queryRef.value.resetFields();
	state.dataList = [];
	getDataList();
};

// 过滤筛选列表
const filterChange = (filter) => {
	if (filter['dataType']) {
		state.queryForm.dataType = filter.dataType.join(',');
		getDataList();
	} else if (filter['dataSourceType']) {
		state.queryForm.dataSourceType = filter.dataSourceType.join(',');
		getDataList();
	} else if (filter['publishStatus']) {
		state.queryForm.publishStatus = filter.publishStatus.join(',');
		getDataList();
	}
};

let activeId = ref();
//新建标签
function handAddTag(scope) {
	if (scope.row.labelList) {
		addTagRef.value.openDialog({ tagList: scope.row.labelList, id: scope.row.id });
	} else {
		addTagRef.value.openDialog({ id: scope.row.id });
	}
	activeId.value = scope.row.fileDataSourceId;
}

async function uplateTag(tagArr) {
	let data = {
		id: activeId.value,
		firstLabel: tagArr.tagList[0],
		secondLabel: tagArr.tagList[1],
		thirdLabel: tagArr.tagList[2],
	};

	try {
		await updateDataLabel(data);
		useMessage().success('标签修改成功');
		getDataList();
	} catch (error) {}
}
//创建资源
const fileAdd = (type: any, row: any) => {
	uploadFile.value.openDialog(type, row);
	uploadFile.value.reset();
};
// 删除操作
const handleDelete = async (row: any) => {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		await delFileList([row.fileDataSourceId]);
		getDataList();
		useMessage().success(t('common.delSuccessText'));
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};

//轻量级
const handleLightweight = () => {
	LigtPopup.value.openDialog();
	LigtPopup.value.reset();
};

// 发布二维 三维
const handleStatus = (row: any) => {
	layertPopup.value.openDialog(row);
	layertPopup.value.reset();
};
</script>
